<template>
    <section class="ry">
        <div class="permission-left">
            <h4>● 人员管理</h4>
            <div style="">
                <a-input-search placeholder="搜索" @change="onChangesearch" />
            </div>

            <a-tree
                v-model="checkedKeys"
                :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent"
                :tree-data="dptList"
                :selected-keys="selectedKeys"
                @select="onSelect"
                @expand="onExpand"
            >
                <template slot="title" slot-scope="{ title }">
                    <span v-if="title.indexOf(searchValue) > -1">
                        {{ title.substr(0, title.indexOf(searchValue)) }}
                        <span style="color: #f50; background-color: #1890ff">{{
                            searchValue
                        }}</span>
                        {{
                            title.substr(
                                title.indexOf(searchValue) + searchValue.length
                            )
                        }}
                    </span>
                    <span v-else>{{ title }}</span>
                </template>
            </a-tree>
        </div>
        <div class="permission-right clear">
            <section v-for="(item, index) in dptUserList" :key="index">
                <div class="permission-info-tog">
                    <div class="permission-info">
                        <div class="clear">
                            <div class="name">
                                <p>姓名</p>
                                <p>
                                    {{ item.userRealName }}
                                </p>
                                <p>电话</p>
                                <p>{{ item.userMobile }}</p>
                                <p>归属</p>
                                <p>
                                    {{ item.personOrgName }}
                                </p>
                            </div>
                            <div class="touxiang">
                                <img
                                    src="../../../image/computer.png"
                                    width="80%"
                                />
                                <p>头像</p>
                            </div>
                        </div>

                        <div class="but1 clear">
                            <a-button
                                @click="delDptUser(item, index)"
                                type="danger"
                            >
                                删除
                            </a-button>

                            <a-button
                                class="fr"
                                @click="updateDptUser(item)"
                                type="primary"
                            >
                                修改
                            </a-button>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </section>
</template>
<script>
//管理员设置

//人员管理
const dataList = [];
const generateList = (data) => {
    for (let i = 0; i < data.length; i++) {
        const node = data[i];
        const key = node.key;
        dataList.push({ key, title: key });
        if (node.children) {
            generateList(node.children);
        }
    }
};

const getParentKey = (key, tree) => {
    let parentKey;
    for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
            if (node.children.some((item) => item.key === key)) {
                parentKey = node.key;
            } else if (getParentKey(key, node.children)) {
                parentKey = getParentKey(key, node.children);
            }
        }
    }
    return parentKey;
};
export default {
    data() {
        return {
            //人员管理
            expandedKeys: [],
            autoExpandParent: true,
            searchValue: "",
            checkedKeys: [],
            selectedKeys: [],
            treeData: [],
            replaceFields: {
                children: "subDptList",
                title: "dptName",
                key: "dptCode",
            },
            ryvisible: false,

            // 人员管理列表
            dptList: [],
            // 当前选择的部门
            curDptItem: 0,
            // 部门人员列表
            dptUserList: [],
            // 修改人员管理中的人员的id
            updateUserId: "",
            // 人员编辑或者新增人员信息
            userInfoDpt: {
                personOrgName: "",
                personOrgCode: "",
                personPostCode: "",
                personPostName: "",
                userRealName: "",
                userMobile: "",
                addFlag: "",
                userCode: "",
                // personOrgCodeAll: [],
            },

           
        };
    },
    mounted() {
        //管理员管理
        // this.getOwerUserInfo();
        //人员管理
        this.getOwerDptList();
    },
    methods: {
        //人员管理
      
        onChangesearch(e) {
            const value = e.target.value;
            const expandedKeys = dataList
                .map((item) => {
                    if (item.title.indexOf(value) > -1) {
                        return getParentKey(item.key, this.dptList);
                    }
                    return null;
                })
                .filter((item, i, self) => item && self.indexOf(item) === i);
            Object.assign(this, {
                expandedKeys,
                searchValue: value,
                autoExpandParent: true,
            });
        },
        onExpand(expandedKeys) {
            console.log("onExpand", expandedKeys);

            this.expandedKeys = expandedKeys;
            this.autoExpandParent = false;
        },
        onCheck(checkedKeys) {
            console.log("onCheck", checkedKeys);
            this.checkedKeys = checkedKeys;
        },
        onSelect(selectedKeys, info) {
            console.log("onSelect", info);
            if(info.selectedNodes.length){
                 console.log(info.selectedNodes[0].data.props.dptCode);
                this.selectedKeys = selectedKeys;

                this.handleDptUsers({
                    dptCode: info.selectedNodes[0].data.props.dptCode,
                });
                this.$emit('ryonSelect',selectedKeys,info)
            }
        },
        // 修改部门人员
        updateDptUser(item) {
            this.$emit("updateDptUser", item);
        },
        // 删除部门人员
        delDptUser(item) {
            let that = this;
            this.$confirm({
                title: "提示",
                cancelText: "取消",
                okText: "确认",
                content: `确定要删除成员${item.userRealName}吗?`,
                onOk() {
                    that.$post("/exter/manage/delUserByUsercode", {
                        paramVar: item.userCode,
                    }).then(() => {
                        that.handleDptUsers({ dptCode: that.curDptItem });
                    });
                },
                onCancel() {},
            });
        },
        digui(list) {
            list.title = list.dptName;
            list.children = list.subDptList;
            list.key = list.dptName;
            list.scopedSlots = { title: "title" };
            if (list.subDptList.length > 0) {
                list.subDptList.forEach((element) => {
                    element.title = element.dptName;
                    element.children = element.subDptList;
                    element.key = element.dptName;
                    element.scopedSlots = { title: "title" };
                    this.digui(element);
                });
            }
        },
        // 查询所有部门
        getOwerDptList() {
            this.dptList = [];
            this.$post("/exter/manage/getOwerDptList", {
                paramVar: this.editcode,
            }).then((result) => {
                this.dptList.push(result.buss[0]);
                this.digui(this.dptList[0]);
                generateList(this.dptList);
            });
        },
        handleDptUsers(item) {
            this.curDptItem = item.dptCode;
            let paramsDep = {
                paramVar: item.dptCode,
            };
            this.$post("/exter/manage/getDptUserInfo", paramsDep).then(
                (result) => {
                    this.dptUserList = result.buss;
                }
            );
        },
    },
    watch: {
        checkedKeys(val) {
            console.log("onCheck", val);
        },
    },
};
</script>

<style scoped lang='less'>
.index-info {
    color: white;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 40px;
    margin: 0 auto;
    background: #0a2d67;
    > div {
        width: 100%;
    }
    
    //人员管理
    .ry,
    .ddt {
        .permission-left {
            float: left;
            width: 15%;
            height: 80vh;
            overflow: auto;
            background: #1d4292;
            font-size: 14px;
            h4 {
                margin-top: 10px;
                background: #0c356d;
                height: 35px;
                line-height: 35px;
                padding-left: 10px;
                color: #fff;
            }
            .search-wz {
                position: relative;
            }
            .renyuan-dpt-list {
                li {
                    margin: 6px 0;
                    padding: 4px 0;
                    padding-left: 20px;
                }
                li:hover {
                    background: #2ce0ef;
                    cursor: pointer;
                }
                .actived {
                    background: #2ce0ef;
                }
            }
        }
        .permission-right {
            float: right;
            width: 84%;
            height: 80vh;
            overflow: auto;
            background: #1d4292;

            .permission-info {
                float: left;
                margin: 15px 10px 15px 15px;
                padding: 20px;
                background: #3258e9;
                width: 280px;
                border-radius: 10px;
                .name {
                    float: left;
                    width: 50%;
                    word-wrap: break-word;
                }
                .touxiang {
                    width: 40%;
                    float: right;
                    img {
                        margin: 0 auto;
                        display: block;
                    }
                    p {
                        margin-top: 5px;
                        text-align: center;
                    }
                }
                .but1 {
                    margin-top: 10px;
                }
            }
        }
    }
    
}
</style>
